<template>
	<div class="search-mask">
		<div class="fixed-search">
			<div class="search-wrap">
				<div class="search-input">
					<i class="fa fa-search"></i>
					<input type="search" placeholder="搜索" v-model="searchText" ref="searchInput" @keyup.13="goSearch">
					<i class="mintui mintui-field-error" @click="emptySearch" v-show="obtainError.isShow"></i>
				</div>
				<a href="javascript:;" class="cancel-search" @click="cancelSearch">取消</a>
			</div>
		</div>
		<div class="search-history">
			<h3 class="title">搜索历史</h3>
			<ul class="history-list">
				<li v-for="(item,index) in itemList">
					<a href="javascript:;" class="searchLabel" @click="goSearch(item.tName)">{{item.tName}}</a>
				</li>
			</ul>
		</div>
		<!--<div class="search-history quick-search">
			<h3 class="title">快速搜索</h3>
			<ul class="history-list">
				<li>
					<a href="javascript:;" class="searchLabel">渠道客户</a>
				</li>
				<li>
					<a href="javascript:;" class="searchLabel">王凯</a>
				</li>
			</ul>
		</div>-->
	</div>
</template>
<script>
	export default {
		props: {
			msgfrom:{
				type: Boolean,
      			default: false
			}
		},
		data () {
		    return {
		      	searchText:'',
		      	itemList:[],
		      	reList:[]
		    }	
		},
		mounted (){
			this.obtainFocus();
			this.objListInit();
		},
		computed: {
			obtainError () {
				let isShow
				if (this.searchText.length > 0) {
			        isShow = true
			    }
			    return {
			        isShow
			    }
			}
		},
		methods :{
			cancelSearch: function(){
				this.$emit('cancel-search',false)
			},
			emptySearch (){
				this.searchText = '';
				this.obtainFocus();
			},
			obtainFocus () {
			    this.$refs.searchInput.focus();
			},
            objListInit() {
            	let _self = this ;
            	this.itemList=[];
				var objList = window.localStorage.getItem("2_objList");
				if(objList != null){
					let items = (JSON.parse(objList)).reverse();
					for(var ii=0; ii<6; ii++){
						if(items[ii] != undefined){
							_self.itemList.push({"tName":items[ii].tName})
						}
					}
				}
			},
			goSearch(labelText){
                var _self = this;
                if(typeof(labelText) == "object"){
		           labelText = "";
		        }
                if(labelText){
                	_self.searchText = labelText;
                }else{
                	_self.reList = _self.itemList;
	                _self.reList.reverse();
	                if(_self.searchText.trim()){
						_self.reList.push({"tName":_self.searchText})
						window.localStorage.setItem("2_objList", JSON.stringify(_self.reList));
						_self.objListInit();
					}
                }
                if(typeof(_self.searchText) == "object"){
		           _self.searchText = "";
		        }
				_self.$router.push({name: 'customerList', params: {searchContent: _self.searchText}})
            }
		}
	}
</script>
<style scoped>
	.search-mask{position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 10;background-color: #f8f5f3;display: block;}
	.fixed-search{padding: 10px;position: fixed;left: 0;right: 0;top: 0;display: block;}
	.search-wrap{padding-right: 40px;position: relative;}
	.search-wrap .cancel-search{position: absolute;right: 0;top: 0;color: #999;width: 40px;height: 36px;line-height: 36px;text-align: center;}
	.search-input{border:1px solid  #cdcdcd;height: 36px;border-radius: 40px;background-color: #fff;overflow: hidden;padding:0 30px 0 40px;position: relative;}
	.search-input .fa-search{position: absolute;left: 12px;font-size: 20px;color: #cdcdcd;top: 7px;}
	.search-input input[type="search"]{height: 34px;line-height: 34px;width: 100%;}
	.search-input .mintui-field-error{position: absolute;right: 10px;top: 6px;opacity: 0.6;}

	.search-history{margin-top: 64px;padding: 0 10px;}
	.search-history .title{font-weight: normal;padding-right: 40px;color: #999;}
	.history-list{margin-top: 10px;max-height: 78px;overflow: hidden;}
	.history-list li{float: left;margin-bottom: 10px;display: inline-block;margin-right: 10px;}
	.history-list .searchLabel{border:1px  solid #cdcdcd;padding: 4px 12px;display:block;border-radius: 10px;background-color: #fff;color: #999;}

	.quick-search{margin-top: 10px;}
	.quick-search .searchLabel{background-color: #e1c7c7;color: #fff;border:none;}

	.history-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
</style>